<template>
  <main>
    <div class="title">
      <label>文章标题</label>
      <input type="text" v-model="title" placeholder="请输入标题" />
    </div>
    <label>文章内容</label>
    <div class="content">
      <textarea v-model="content" placeholder="请输入内容" rows="20"></textarea>
    </div>

    <div class="btns">
      <el-select
        v-model="type"
        placeholder="请选择类型"
        style="width: 300px; margin-right: 20px"
      >
        <el-option
          v-for="item in typeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <div class="save" @click="save(ARTICLE_ENUMS.ARTICLE_ENUMS.草稿)">
        保存草稿
      </div>
      <div class="submit" @click="save(ARTICLE_ENUMS.ARTICLE_ENUMS.待审核)">
        保存并提交审核
      </div>
      <!-- <div class="submit" @click="save(ARTICLE_ENUMS.ARTICLE_ENUMS.已发布)">
        保存
      </div> -->
    </div>
  </main>
</template>
<script setup>
import { getArticleDetail, writeArticle } from "@/api/article";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import ARTICLE_ENUMS from "@/utils/Enums";
import { useUserStore } from "@/stores/userStore";
import router from "@/router";
import { getTypeList } from "@/api/types";
const content = ref("");
const title = ref("");
const type = ref();
const typeList = ref([
  {
    id: -1,
    name: "全部",
  },
]);
getTypeList().then((res) => {
  typeList.value = [...typeList.value, ...res.data.data];
});
const init = () => {
  const id = router.currentRoute.value.params.id;
  if (id) {
    getArticleDetail(id, useUserStore().userInfo.id).then((res) => {
      title.value = res.data.data.title;
      content.value = res.data.data.content;
    });
  }
};

const save = async (status) => {
  if (status === 0) {
    await writeArticle({
      id: router.currentRoute.value.params.id || null,
      title: title.value,
      content: content.value,
      status: status,
      userId: useUserStore().userInfo.id,
    });
    ElMessage.success("保存成功！");
    router.push("/");
  } else {
    ElMessageBox.confirm("是否提交审核？", {
      title: "提示",
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    })
      .then(async () => {
        await writeArticle({
          id: router.currentRoute.value.params.id || null,
          title: title.value,
          content: content.value,
          status: status,
          userId: useUserStore().userInfo.id,
          typeId: type.value == -1 ? null : type.value,
        });
        ElMessage.success("提交成功！");
        router.push("/");
      })
      .catch(() => {
        // ElMessage.info("已取消提交");
      });
  }
};

init();
</script>
<style lang="less" scoped>
main {
  width: 70%;
  margin: 20px auto;
  background-color: #fff;
  padding: 30px;
  label {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 700;
    display: block;
  }
  .title {
    input {
      outline: none;
      width: 100%;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
  .content {
    textarea {
      outline: none;
      width: 100%;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
  .btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .save {
      padding: 10px 20px;
      background-color: #fff;
      border: 1px solid #f0f0f0;
      border-radius: 5px;
      cursor: pointer;
      margin-right: 20px;
      transition: all 0.3s ease-in-out;
      &:hover {
        background-color: #f0f0f0;
        border: 1px solid #ddd;
      }
    }
    .submit {
      padding: 10px 20px;
      background-color: #ec6149;
      border: 1px solid #ec6149;
      border-radius: 5px;
      cursor: pointer;
      color: #fff;
      transition: all 0.3s ease-in-out;
      &:hover {
        background-color: #e93a1c;
      }
    }
  }
}
</style>
